<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>礼品管理</title>
    <link rel="stylesheet" href="${ctxPath}/assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="${ctxPath}/assets/module/admin.css"/>
    <link rel="stylesheet" href="${ctxPath}/assets/module/formSelects/formSelects-v4.css"/>
</head>
<style>
    .modelBeforeApplyUserForm label {
        width: 100px;
    }

    .layui-table-cell {
        height: auto;
        /*line-height: 28px;*/
    }
</style>
<body>
<% include("../layout/loading.html"){} %>

<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-form toolbar">

                <div class="layui-inline">
                    <div class="layui-form-item">
                        <label class="layui-form-label w-auto">礼品名称:</label>
                        <div class="layui-input-inline mr0">
                            <input id="productName" class="layui-input" type="text" placeholder="请输入"/>
                        </div>
                    </div>
                </div>
                <div class="layui-inline">
                    <button id="btnSearch" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>查询</button>
                    <button id="btnReset" class="layui-btn icon-btn"><i class="layui-icon">&#xe669;</i>重置</button>
                </div>

                <div class="layui-form-item audit" style="margin-top: 20px">
                    <button id="btnAdd" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>新增</button>
                </div>

                <div class="layui-form-item" style="margin-top: 20px">
                    <table class="layui-table" id="productTable" lay-filter="productTable"
                           style="margin-top: 30px"></table>
                </div>

            </div>
        </div>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="tableBar">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a> 
    <!--    {{#  if(d.status == 1 ){ }}-->
    <!--        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del1">下架</a>-->
    <!--    {{# } else { }}-->
    <!--        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="del2">上架</a>-->
    <!--    {{#  } }} -->
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del3">删除</a>
</script>

<!-- 表单弹窗 -->
<script type="text/html" id="productVo">
    <form id="productVoForm" lay-filter="productVoForm" class="layui-form model-form productVoForm"
          style="margin-left: 70px;height: 500px">
        <input name="id" type="hidden"/>
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>礼品名称:</label>
            <input name="productName" placeholder="请输入" type="text" class="layui-input" lay-verType="tips"
                   autocomplete="off" lay-verify="required" style="width: 300px"/>
        </div>
        <!--        <div class="layui-form-item">-->
        <!--            <label class="layui-form-label"><span style="color: red">*</span>礼品封面:</label>-->
        <!--            <input name="productNo" placeholder="请输入商品编码" type="text" class="layui-input" lay-verType="tips"-->
        <!--                   autocomplete="off" lay-verify="required" style="width: 300px"/>-->
        <!--        </div>-->
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>礼品封面:</label>
            <button type="button" class="layui-btn layui-icon layui-icon-upload" id="productImg">上传文件</button>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <img class="layui-upload-img" id="productPicUrl" width="100px">
            <input id="picUrl" name="picUrl" lay-verify="required" hidden/>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <img class="layui-upload-img" id="productPicUrl" width="100px">
            <input id="picUrl" name="picUrl" lay-verify="required" hidden/>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <img class="layui-upload-img" id="productPicUrl" width="100px">
            <input id="picUrl" name="picUrl" lay-verify="required" hidden/>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>所需豆藤:</label>
            <input name="productName" placeholder="请输入" type="text" class="layui-input" lay-verType="tips"
                   autocomplete="off" lay-verify="required" style="width: 300px"/>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>礼品介绍:</label>
            <input name="productDesc" placeholder="请输入" type="text" class="layui-input" lay-verType="tips"
                   autocomplete="off" lay-verify="required" style="width: 300px"/>
        </div>
        <!--        <div class="layui-form-item">-->
        <!--            <label class="layui-form-label"><span style="color: red;">*</span>规格:</label>-->
        <!--            <div class="layui-input-block" style="width: 250px">-->
        <!--                <input name="specification" placeholder="请输入" type="text" class="layui-input" lay-verType="tips"-->
        <!--                       lay-verify="required"/>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        <div id="priceDiv" class="layui-form-item">-->
        <!--            <label class="layui-form-label"><span style="color: red;">*</span>价格:</label>-->
        <!--            <div class="layui-input-block" style="width: 250px">-->
        <!--                <input name="price" placeholder="请输入" type="number" class="layui-input" lay-verType="tips"-->
        <!--                       lay-verify="required"/>-->
        <!--            </div>-->
        <!--            <input name="speId" type="hidden"/>-->
        <!--        </div>-->
        <!--        <div class="layui-form-item">-->
        <!--            <label class="layui-form-label"></label>-->
        <!--            <div class="layui-input-block" style="width: 250px">-->
        <!--                <button id="addSpecification" class="layui-btn"><i class="layui-icon">&#xe654;</i></button>-->
        <!--                <span style="color: red;margin-left: 10px">点击新增规格</span>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        <div class="layui-form-item">-->
        <!--            <label class="layui-form-label"><span style="color: red">*</span>状态</label>-->
        <!--            <div class="layui-inline" style="width: 300px">-->
        <!--                <select name="status">-->
        <!--                    <option value="">请选择</option>-->
        <!--                    <option value="1">上架</option>-->
        <!--                    <option value="2">下架</option>-->
        <!--                </select>-->
        <!--            </div>-->
        <!--        </div>-->
        <div class="layui-form-item text-right">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closePageDialog">取消</button>
            <button class="layui-btn" lay-filter="productVoSubmit" lay-submit>保存</button>
        </div>

    </form>
</script>


<!-- js部分 -->
<script type="text/javascript" src="${ctxPath}/assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="${ctxPath}/assets/js/common.js"></script>

<script>
    layui.use(['layer', 'form', 'table', 'admin', 'laydate', 'upload', 'jquery', 'formSelects', 'excel'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var admin = layui.admin;
        var laydate = layui.laydate;
        var upload = layui.upload;
        var formSelects = layui.formSelects;


        var insTb = table.render({
            elem: '#productTable',
            url: '/product/list',
            page: true,
            cellMinWidth: 100,
            text: {none: '暂无数据'},
            cols: [[
                {field: 'id', title: '编号', hide: true},
                {type: 'numbers'},
                {field: 'productName', title: '商品名称'},
                // {field: 'productNo', title: '礼品封面',width:250},
                {
                    title: '礼品封面', align: "center", width: 150, templet: function (d) {
                        if (d.picUrl != null && d.picUrl != '') {
                            return '<div ><img src="' + d.picUrl + '" alt="" width="100px" lay-event="showBigImage1" /></div>';
                        } else {
                            return '   --    ';
                        }
                    }
                },
                // {
                //     field: 'status', title: '状态', width: 80, templet: function (d) {
                //         var statusStr="下架";
                //         if(d.status==1){
                //             statusStr="上架";
                //         }
                //         return statusStr;
                //     }
                // },
                {field: 'picNum', title: '礼品图集'},
                {field: 'price', title: '所需豆藤'},

                // {field: 'productDesc', title: '商品描述'},
                {
                    field: 'createdDate', title: '创建时间',  templet: function (d) {
                        return d.createdDate;
                    }
                },
                {
                    field: 'updatedDate', title: '修改时间', templet: function (d) {
                        return d.updatedDate
                    }
                },
                {align: 'center', toolbar: '#tableBar', title: '操作', minWidth: 200}
            ]]
        });

        //搜索
        $('#btnSearch').click(function () {
            var productName = $('#productName').val();
            var storeId = $('#storeId').val();
            insTb.reload({
                where: {
                    storeId: storeId,
                    productName: productName
                }
            });
        });

        // 重置
        $('#btnReset').click(function () {
            $("#productName").val("");
            $("#storeId").val("");
            window.location.reload();
        });

        // 添加
        $('#btnAdd').click(function () {
            showEditModel();
        });

        // 工具条点击事件
        table.on('tool(productTable)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            switch (obj.event) {
                // 修改
                case 'edit':
                    showEditModel(data);
                    break;
                // 下架
                case 'del1':
                    doDel1(data.id);
                    break;
                // 上架
                case 'del2':
                    doDel2(data.id);
                    break;
                // 删除
                case 'del3':
                    doDel3(data.id);
                    break;
                case 'showBigImage1':
                    showBigImage(data.picUrl);
                    break;
            }
        });

        function showBigImage(e) {
            layer.open({
                type: 1,
                title: false,
                closeBtn: 0,
                shadeClose: true, //点击阴影关闭
                area: ['500px', 'auto'], //宽高
                content: '<div ><img src="' + e + '" alt="" width="500px" ></a></div>'
            });
        }

        // 显示表单弹窗
        function showEditModel(productVo) {
            admin.open({
                type: 1,
                title: (productVo ? '修改' : '新建') + '商品',
                area: '650px',
                content: $('#productVo').html(),
                success: function (layero, dIndex) {
                    var count = 1;
                    // 回显数据
                    if (productVo) {
                        $('#productPicUrl').attr('src', productVo.picUrl);//进行图片回显
                        var specification = productVo.specificationStr.split('|');
                        count = specification.length;
                        productVo.specification = specification[0].split(',')[0];
                        productVo.price = specification[0].split(',')[1];
                        productVo.speId = specification[0].split(',')[2];
                        var dom = '';
                        $.each(specification, function (i) {
                            if (i > 0) {
                                var spe = specification[i].split(',');
                                dom += "<div class='layui-form-item specification'>\n" +
                                    "            <label class='layui-form-label'><span style='color: red;'>*</span><span>规格" + (i + 1) + ":</span></label>\n" +
                                    "            <div class='layui-inline' style='width: 250px'>\n" +
                                    "                <input name='specification" + (i + 1) + "' placeholder='请输入' type='text' class='layui-input' lay-verType='tips'\n" +
                                    "                       lay-verify='required' value='" + spe[0] + "'/>\n" +
                                    "            </div>\n" +
                                    "            <div class='layui-inline'>\n" +
                                    "                <button name='delSpecification' class='layui-btn'><i class='layui-icon'>&#x1006;</i></button>" +
                                    "            </div>\n" +
                                    "        </div>\n" +
                                    "        <div class='layui-form-item'>\n" +
                                    "            <label class='layui-form-label'><span style='color: red;'>*</span>价格:</label>\n" +
                                    "            <div class='layui-input-block' style='width: 250px'>\n" +
                                    "                <input name='price" + (i + 1) + "' placeholder='请输入' type='number' class='layui-input' lay-verType='tips'\n" +
                                    "                       lay-verify='required' value='" + spe[1] + "'/>\n" +
                                    "            </div>\n" +
                                    "            <input name='speId" + (i + 1) + "' type='hidden' value='" + spe[2] + "'/>\n" +
                                    "        </div>"
                            }
                        });
                        $('#priceDiv').after(dom);
                        form.val('productVoForm', productVo);
                    }
                    form.render();

                    //新增规格
                    $('#addSpecification').click(function () {
                        var dom = $(this).parents('.layui-form-item').prev();
                        dom.after("<div class='layui-form-item specification'>\n" +
                            "            <label class='layui-form-label'><span style='color: red;'>*</span><span>规格" + (count + 1) + ":</span></label>\n" +
                            "            <div class='layui-inline' style='width: 250px'>\n" +
                            "                <input name='specification" + (count + 1) + "' placeholder='请输入' type='text' class='layui-input' lay-verType='tips'\n" +
                            "                       lay-verify='required'/>\n" +
                            "            </div>\n" +
                            "            <div class='layui-inline'>\n" +
                            "                <button name='delSpecification' class='layui-btn'><i class='layui-icon'>&#x1006;</i></button>" +
                            "            </div>\n" +
                            "        </div>\n" +
                            "        <div class='layui-form-item'>\n" +
                            "            <label class='layui-form-label'><span style='color: red;'>*</span>价格:</label>\n" +
                            "            <div class='layui-input-block' style='width: 250px'>\n" +
                            "                <input name='price" + (count + 1) + "' placeholder='请输入' type='number' class='layui-input' lay-verType='tips'\n" +
                            "                       lay-verify='required'/>\n" +
                            "            </div>\n" +
                            "            <input name='speId" + (count + 1) + "' type='hidden'/>\n" +
                            "        </div>");
                        count++;
                        return false;
                    });

                    //删除规格
                    var delSpecification = [];
                    $(document).on('click', "button[name='delSpecification']", function () {
                        var dom = $(this).parents('.layui-form-item');
                        //先更改后面的规格
                        var specificationDom = dom.nextAll('.specification');
                        $.each(specificationDom, function (index, item) {
                            var specificationLabel = $(this).children(":first").children(":last");
                            var count = specificationLabel.text().split(':')[0].substring(2);
                            specificationLabel.html('规格' + (count - 1) + ':');
                        });
                        //删除节点
                        dom.next().remove();
                        dom.remove();
                        count--;
                        return false;
                    });

                    //上传图片
                    upload.render({
                        elem: '#productImg',
                        url: '/upload/uploadFile',
                        choose: function (obj) {
                            //预读本地文件示例
                            obj.preview(function (index, imgFile, result) {
                                $('#productPicUrl').attr('src', result);
                            });
                        },
                        done: function (res) {
                            if (res.msg == null) {
                                return layer.msg('上传失败', {icon: 2});
                            }
                            $('#picUrl').val(res.msg);
                        }
                    });
                    form.on('submit(productVoSubmit)', function (data) {
                        var specificationStr = '';
                        $.each(data.field, function (key) {
                            if (key.indexOf('specification') > -1) {
                                specificationStr += data.field[key];
                            }
                            if (key.indexOf('price') > -1) {
                                specificationStr += ',' + data.field[key];
                            }
                            if (key.indexOf('speId') > -1) {
                                specificationStr += ',' + data.field[key] + '|';
                            }
                        });
                        data.field.specificationStr = specificationStr;
                        layer.close(dIndex);
                        if (productVo) {
                            ajaxCommon('/product/updateProduct', data.field);
                        } else {
                            ajaxCommon('/product/addProduct', data.field);
                        }
                        insTb.reload();
                        return false;
                    });
                }
            });
        }

        function doDel1(id) {
            top.layer.confirm('确定要下架吗?', {icon: 7}, function (i) {
                top.layer.close(i);
                ajaxCommon('/product/solOut', {id: id, status: 2});
                insTb.reload();
            });
        }

        function doDel2(id) {
            top.layer.confirm('确定要上架吗?', {icon: 7}, function (i) {
                top.layer.close(i);
                ajaxCommon('/product/solOut', {id: id, status: 1});
                insTb.reload();
            });
        }

        function doDel3(id) {
            top.layer.confirm('确定要删除吗?', {icon: 7}, function (i) {
                top.layer.close(i);
                ajaxCommon('/product/delProduct', {id: id});
                insTb.reload();
            });
        }
    })
</script>

</body>
</html>
